<template>
  <div class="chat">
    <div class="chat-left">
      <h1>{{chatUser.userName}}<span v-if="chatUser.num>1">(<span>{{chatUser.num}}</span>)</span></h1>
      <el-divider></el-divider>
      <div style="height: 500px; font-size: 300%; overflow:auto" v-html="content"></div>
      <div style="height: 200px; width: 100%">
        <el-divider></el-divider>
        <textarea v-model="messageText" @keyup.enter="send(chatUser,messageText,userInfo)" style="resize: none;height: 170px; width: 95%; border: none; outline: none"></textarea>
        <div style="text-align: right; padding-right: 30px">
          <el-button type="primary" @click="send(chatUser,messageText,userInfo)">发送</el-button>
        </div>
      </div>
    </div>
    <div class="chat-right">
      <h1>用户列表</h1>
      <el-divider></el-divider>
      <div class="toUser" v-for="croupUser in croupUsers" :key="croupUser.id">
        <GroupChat :style="{background:chatUser.id===croupUser.groupRoomId? '#FFCCCC':''}"  v-bind="croupUser"></GroupChat>
      </div>
      <div class="toUser" :style="{background:chatUser.id===user.userId? '#FFCCCC':''}" v-for="user in users" :key="user.userId" @click="updateChatUser(user.userInfo.id,user.userInfo.userName,1)">
        <el-badge :value="user.userInfo.noReadNum" :hidden="user.userInfo.noReadNum>0? false:true" class="item">
          <el-avatar style="width: 50px; height: 50px" :src="user.userInfo.photoUrl"></el-avatar>
        </el-badge>
        <h2>{{ user.userInfo.userName }}</h2>
        <svg v-if="user.userInfo.loginState" style="margin-top: 10px" t="1682046511120" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2639" width="40" height="40"><path d="M967.11 0H56.89C25.6 0 0 27.93 0 62.06v713.7c0 34.13 25.6 62.06 56.89 62.06h341.33v124.12H85.33c-14.22 0-28.44 15.52-28.44 31.03 0 15.52 14.22 31.03 28.44 31.03h853.33c14.22 0 28.44-15.51 28.44-31.03 0-15.51-14.22-31.03-28.44-31.03H625.78V837.82h341.33c31.29 0 56.89-27.93 56.89-62.06V62.06C1024 27.93 998.4 0 967.11 0zM562 934h-97.89v-99.18H562V934z m385-180H80V77h867v677zM259.46 422.85c-13.18-13.82-12.5-35.55 1.45-48.56 14.04-13.02 36.05-12.34 49.19 1.43l143.42 150.34 261.51-287.04c12.91-14.04 34.87-15.2 49.14-2.55 14.27 12.7 15.45 34.39 2.58 48.52L481.54 598.05c-6 6.55-13.97 10.31-22.21 11.17-2.13 0.4-4.29 0.59-6.46 0.59-9.24 0-18.48-3.62-25.32-10.78L259.46 422.85z" p-id="2640"></path></svg>
        <svg v-if="!user.userInfo.loginState" t="1681616895330" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2901" width="50" height="50"><path d="M256.6656 240.0256l-16.64 16.64c-74.24 74.24-74.24 195.072 0 269.312l85.0432 85.0432c4.8128 4.8128 11.3152 7.5264 18.1248 7.5264s13.312-2.7136 18.1248-7.5264l57.088-57.088a25.61536 25.61536 0 0 0 0-36.1984 25.61536 25.61536 0 0 0-36.1984 0l-38.9632 38.9632-67.0208-66.9696c-54.272-54.272-54.272-142.592 0-196.864l16.64-16.64c54.272-54.272 142.592-54.272 196.864 0l66.9696 66.9184-37.7344 37.7344a25.61536 25.61536 0 0 0 0 36.1984 25.61536 25.61536 0 0 0 36.1984 0l55.808-55.808c4.8128-4.8128 7.5264-11.3152 7.5264-18.1248s-2.7136-13.312-7.5264-18.1248l-85.0432-85.0432c-74.24-74.1888-195.0208-74.24-269.2608 0.0512zM662.7328 412.9792l-55.808 55.808a25.61536 25.61536 0 0 0 0 36.1984 25.61536 25.61536 0 0 0 36.1984 0l37.7344-37.7344 66.9696 66.9184c54.272 54.272 54.272 142.592 0 196.864l-16.64 16.64c-54.272 54.272-142.592 54.272-196.864 0l-66.9184-66.9696 38.9632-38.9632a25.61536 25.61536 0 0 0 0-36.1984 25.61536 25.61536 0 0 0-36.1984 0l-57.088 57.088c-4.8128 4.8128-7.4752 11.3152-7.4752 18.1248s2.7136 13.312 7.4752 18.1248l85.0432 85.0432c37.12 37.12 85.8624 55.7056 134.656 55.7056 48.7424 0 97.536-18.5856 134.656-55.7056l16.64-16.64c74.24-74.24 74.24-195.072 0-269.312l-85.0432-85.0432c-10.0864-9.9328-26.3168-9.9328-36.3008 0.0512z" fill="#040000" p-id="2902"></path><path d="M646.656 646.656a25.61536 25.61536 0 0 0 0-36.1984L413.5936 377.344a25.61536 25.61536 0 0 0-36.1984 0 25.61536 25.61536 0 0 0 0 36.1984l233.0624 233.0624a25.5488 25.5488 0 0 0 18.1248 7.5264c6.5024 0 13.056-2.4576 18.0736-7.4752zM686.8992 296.0384l18.5344-69.2736c3.6352-13.6704-4.4544-27.6992-18.1248-31.3856-13.6704-3.6352-27.6992 4.4544-31.3856 18.1248l-18.5344 69.2736c-3.6352 13.6704 4.4544 27.6992 18.1248 31.3856 13.6704 3.6864 27.6992-4.4544 31.3856-18.1248zM797.184 318.5664l-69.2736 18.5344c-13.6704 3.6352-21.76 17.7152-18.1248 31.3856s17.7152 21.76 31.3856 18.1248l69.2736-18.5344c13.6704-3.6352 21.76-17.7152 18.1248-31.3856a25.66144 25.66144 0 0 0-31.3856-18.1248zM282.8288 637.3888l-69.2736 18.5344c-13.6704 3.6352-21.76 17.7152-18.1248 31.3856s17.7152 21.76 31.3856 18.1248l69.2736-18.5344c13.6704-3.6352 21.76-17.7152 18.1248-31.3856a25.68704 25.68704 0 0 0-31.3856-18.1248zM337.1008 727.9616l-18.5344 69.2736c-3.6352 13.6704 4.4544 27.6992 18.1248 31.3856 13.6704 3.6352 27.6992-4.4544 31.3856-18.1248l18.5344-69.2736c3.6352-13.6704-4.4544-27.6992-18.1248-31.3856-13.6704-3.6864-27.6992 4.4544-31.3856 18.1248z" fill="#040000" p-id="2903"></path></svg>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";
import {Message} from "element-ui";
import GroupChat from "@/views/chat/GroupChat.vue";
export default {
  name: "ChatIndex",
  components:{
    GroupChat
  },
  data() {
    return {
      messageText: "",
    }
  },

  created() {
    // 初始调用连接方法
    // this.init()
  },
  //更新为读状态
  mounted() {
    this.$store.dispatch('UpdateRead');
  },
  computed:{
    ...mapState({
      userInfo:state => state.user.userInfo,
      chatUser:state => state.chat.chatUser,
      users:state => state.chat.users,
      croupUsers:state => state.chat.croupUsers,
      content:state => state.chat.content,
      messagesMap:state => state.chat.messagesMap,
      noRead:state => state.chat.noRead
    })
  },
  methods: {
    updateChatUser(id,name,num){
      let chatNow = {
        id: id,
        userName: name,
        num: num
      }
      this.$store.dispatch('UpdateChatUser',chatNow);
    },
    send(chatUser,messageText,user) {
      if (!chatUser.id) {
        Message({type: 'warning', message: "请选择聊天对象"})
        return;
      }
      if (!messageText || JSON.stringify(messageText)==='"\\n"') {
        Message({type: 'warning', message: "请输入内容"})
        this.messageText = ''
      }else {
        this.$store.dispatch('WebSocketSend', {chatUser, messageText, user});
        this.messageText = ''
      }
    },

    //群聊头像拼接
    getAvatarStyle(numAvatars, index) {
      let style = {};

      if (numAvatars === 1) {
        style.width = '60px';
        style.height = '60px';
      } else if (numAvatars === 2) {
        style.width = '50%';
        style.height = '60px';
      } else if (numAvatars <= 4) {
        style.width = '50%';
        style.height = '50%';
      } else if (numAvatars <= 9) {
        style.width = '33.33%';
        style.height = '33.33%';
      }

      if (numAvatars === 3 && index === 0) {
        style.marginTop = 'calc((100% - 120px) / 2)';
      } else if (numAvatars === 5 && index === 0) {
        style.marginTop = 'calc((100% - 180px) / 2)';
      } else if (numAvatars === 6 && index === 0) {
        style.marginTop = 'calc((100% - 180px) / 2)';
      } else if (numAvatars === 7 && index === 0) {
        style.marginTop = 'calc((100% - 240px) / 2)';
      } else if (numAvatars === 8 && index === 0) {
        style.marginTop = 'calc((100% - 240px) / 2)';
      }

      return style;
    },
  }

}
</script>

<style scoped>
.chat{
  width: 1184px;
  height: 920px;
  margin: 0 auto;
}

.chat-left{
  height: 97%;
  width: 60%;
  background-color: #ffffff;
  float: left;
  margin-top: 20px;
  border: 1px solid #FFB3B3;
  border-radius: 20px 20px 0 0;
}
.chat-left h1{
  margin-top: 20px;
  margin-left: 35px;
  font-size: 200%;
}
.chat-right{
  height: 97%;
  width: 38%;
  margin-top: 20px;
  float: right;
  background-color: #ffffff;
  border: 1px solid #FFB3B3;
  border-radius: 20px 20px 0 0;
}
textarea{
  margin-left: 20px;
  font-size: 200%;
}
.chat-right h1{
  margin-top: 20px;
  margin-left: 30px;
  font-size: 200%;
}
.toUser{
  width: 95%;
  height: 65px;
  margin: 0 auto;
  margin-top: 10px;
  border-radius: 10px;
  position: relative
}


 .toUser:hover{
  cursor: pointer;
  background-color: #9fa3b0;
   border-radius: 10px;
}

.el-avatar{
  margin-left: 20px;
  margin-top: 7px;
  float: left;
}

.toUser h2{
  width: 240px;
  font-size: 200%;
  margin-top: 15px;
  margin-left: 13px;
  float: left;
}
.toUser svg{
  float: right;
  margin-right: 20px;
}
/*消息提示*/
.el-badge{
  float: left;
}
</style>
